<template>
	<view>
		<view class="user-section">
			<image class="bg" :src="requestData.avatar_info.url || '/static/user-bg.jpg'"></image>
			<!--<text @click="upFile" class="bg-upload-btn yticon icon-paizhao"></text>-->
			<view class="portrait-box">
				<image class="portrait" :src="requestData.avatar_info.url || '/static/missing-face.png'"></image>
				<text @click="upFile" class="pt-upload-btn yticon icon-paizhao"></text>
			</view>
		</view>
		<upload-images :url="url" :count="count" :length="length" v-if="showUpFile" @changes="getUrlFromChild"></upload-images>
		<view class="list-cell b-b"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">昵称</text>
			<input type="text"  placeholder="必填"  v-model="requestData.name">
		</view>
		<view class="list-cell b-b"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">性别</text>
			<radio-group @change="radioChange">
				<label class="radio"><radio value="0" :checked="requestData.sex === 0" />保密</label>
				<label class="radio" style="margin-left: 10upx;margin-right: 10upx;"><radio value="1" :checked="requestData.sex === 1" />男</label>
				<label class="radio"><radio value="2" :checked="requestData.sex === 2" />女</label>
			</radio-group>
		</view>
		<view class="list-cell b-b"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">账号</text>
			<input type="number"  v-if="userInfo.mobile"  disabled  placeholder="手机号码不可更改"  maxlength="11"  :value="requestData.mobile">
			<input type="number" v-else  placeholder="请补充手机号码"  maxlength="11"  v-model="requestData.mobile">
		</view>
		<view class="list-cell b-b"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">密码</text>
			<input type="password"  placeholder="选填"  minlength="6"  v-model="requestData.secret">
		</view>
		<view class="list-cell b-b"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">出生日期</text>
			<picker mode="date" @change="bindDateChange">
				<input type="text"  placeholder="选填" disabled :value="requestData.date_of_birth || ''">
			</picker>
		</view>

		<view class="list-cell"  hover-class="cell-hover" :hover-stay-time="50">
			<text class="cell-tit">学校名称</text>
			<input type="text"  placeholder="请输入学校名称"   v-model="requestData.school">
		</view>

		<view class="list-cell m-t log-out-btn" @click="saveData">
			<text class="cell-tit">保存资料</text>
		</view>
	</view>
</template>

<script>
    import uploadImages from '@/components/upload-images.vue';
    import { client, HOST, upFiles } from '../../common/config'
	import {  
	    mapState,  
	    mapMutations  
	} from 'vuex';  
	export default {
	    components:{uploadImages},
		data() {
			return {
			    url: HOST + upFiles.PostUpFiles.url,//传给子组件，上传接口地址
                count:1,//传给子组件，单次可选择的图片数量
                length:1,//传给子组件，可上传总数量
				showUpFile:false,
                requestData:null,
			};
		},
		computed:{
			...mapState(['userInfo']),
		},
		created(){
		  this.requestData = this.userInfo
		},
		methods:{
			...mapMutations(['login']),
            bindDateChange: function(e) {
                this.requestData.date_of_birth = e.target.value//出生日期
            },
            radioChange(e){
                this.requestData.sex = e.detail.value//性别
				this.$forceUpdate();
			},
	        upFile:function () {
				this.showUpFile = !this.showUpFile
            },
            getUrlFromChild(data) {
				console.log('子组件来的值：',data);
				this.showUpFile = false;
				if (data[0].src.id){
					this.requestData.avatar_info.url = data[0].filePath;
                	this.requestData.avatar_id = data[0].src.id;
                }
            },
			async saveData() {
                await this.$api.MyRequest(client.PutClient.url, client.PutClient.method, this.requestData)
					.then((res) => {
					    this.login(res);
					    this.msg('修改成功！');
					})
					.catch((e) => {
					})
			}
		},
	}
</script>

<style lang="scss">
	page{
		background: $page-color-base;
	}
	.user-section{
		display:flex;
		align-items:center;
		justify-content: center;
		height: 460upx;
		padding: 40upx 30upx 0;
		position:relative;
		.bg{
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .4;
		}
		.portrait-box{
			width: 200upx;
			height: 200upx;
			border:6upx solid #fff;
			border-radius: 50%;
			position:relative;
			z-index: 2;
		}
		.portrait{
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.yticon{
			position:absolute;
			line-height: 1;
			z-index: 5;
			font-size: 48upx;
			color: #fff;
			padding: 4upx 6upx;
			border-radius: 6upx;
			background: rgba(0,0,0,.4);
		}
		.pt-upload-btn{
			right: 0;
			bottom: 10upx;
		}
		.bg-upload-btn{
			right: 20upx;
			bottom: 16upx;
		}
	}
	page{
		background: #f5f5f5;
	}
	.list-cell{
		display:flex;
		align-items:baseline;
		padding: 20upx $page-row-spacing;
		line-height:60upx;
		position:relative;
		background: #fff;
		justify-content: center;
		&.log-out-btn{
			margin-top: 40upx;
			.cell-tit{
				color: $uni-color-primary;
				text-align: center;
				margin-right: 0;
			}
		}
		&.cell-hover{
			background:#fafafa;
		}
		&.b-b:after{
			left: 30upx;
		}
		&.m-t{
			margin-top: 16upx;
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-lg;
			color:$font-color-light;
			margin-left:10upx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			margin-right:10upx;
		}
		.cell-tip{
			font-size: $font-base;
			color: $font-color-light;
		}
		input{
			font-size: $font-lg;
		}
	}

</style>
